const path = require('path');
const Plugin = require("html-webpack-plugin");
//导入删除文件夹的插件 返回 { CleanWebpackPlugin: [class CleanWebpackPlugin] }
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//导入压缩js的第三方模块
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require("webpack");
const { optimize } = require('webpack');
module.exports = {
    mode: "development",
    // mode: "production",
    entry: {
        //项目的主入口文件
        app: path.join(__dirname, './src/main.js'),
        //第三方包的名称
        vendors: ['jquery']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].bundle.js'
    },
    //抽离出第三方模块
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
        //压缩js
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    output: {
                        comments: false
                    },
                    compress: {
                        warnings: false,
                        drop_debugger: true,
                        drop_console: true
                    }
                }
            })
        ]
    },
    plugins: [new Plugin({
        template: path.join(__dirname, './src/index.html'),
        filename: 'index.html',
        //表示提供压缩选项
        minify: {
            //移除页面中的注释
            removeComments: true,
            //合并空白字符
            collapseWhitespace: true,
            //移除属性节点上的引号
            removeAttributeQuotes: true
        }
    }), new CleanWebpackPlugin()],
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.jpg|png|gif|bmp$/,
            // use: 'url-loader?limit=30987&name=[name].[ext]'
            use: 'url-loader?limit=30987&name=images/[hash:6]-[name].[ext]'
        }, {
            //添加转换js文件的loader,必须把node-modules目录设置为排除选项，这样在打包的时候会忽略modules目录下的所有JS文件，否则项目运行不起来
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/,
        }]
    }
}